import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Space } from 'antd';
import SignInTaskForm from './SignInTaskForm';
import SignInTaskList from './SignInTaskList';
import StudentSignInStatus from './StudentSignInStatus';
import SignInStatistics from './SignInStatistics';

const CourseSignInManager = ({ courseId, courseName }) => {
  const [refreshTrigger, setRefreshTrigger] = useState(0);
  const [studentModalVisible, setStudentModalVisible] = useState(false);
  const [statsModalVisible, setStatsModalVisible] = useState(false);
  const [selectedTaskId, setSelectedTaskId] = useState(null);

  // 任务创建成功后刷新列表
  const handleTaskCreated = () => {
    setRefreshTrigger(prev => prev + 1);
  };

  // 查看学生签到情况
  const viewStudentList = (taskId) => {
    setSelectedTaskId(taskId);
    setStudentModalVisible(true);
  };

  // 查看签到统计数据
  const viewSignInStats = (taskId) => {
    setSelectedTaskId(taskId);
    setStatsModalVisible(true);
  };

  // 扩展SignInTaskList组件，添加查看学生和统计的功能
  const enhancedSignInTaskList = () => (
    <SignInTaskList 
      courseId={courseId}
      refreshTrigger={refreshTrigger}
      onViewStudents={viewStudentList}
      onViewStats={viewSignInStats}
    />
  );

  return (
    <div className="course-sign-in-manager">
      <Card 
        title={`课程签到管理 - ${courseName || ''}`}
        extra={
          <Space>
            <SignInTaskForm 
              courseId={courseId} 
              onSuccess={handleTaskCreated}
            />
          </Space>
        }
      >
        {courseId ? (
          <>
            {enhancedSignInTaskList()}
            
            {/* 学生签到状态模态框 */}
            <StudentSignInStatus
              taskId={selectedTaskId}
              visible={studentModalVisible}
              onClose={() => setStudentModalVisible(false)}
            />
            
            {/* 签到统计模态框 */}
            <SignInStatistics
              taskId={selectedTaskId}
              visible={statsModalVisible}
              onClose={() => setStatsModalVisible(false)}
            />
          </>
        ) : (
          <div>请先选择一个课程</div>
        )}
      </Card>
    </div>
  );
};

export default CourseSignInManager; 